<html>
	<head>
		<title>栅格布局容器属性设置器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<link rel="stylesheet" href="../assets/libs/layui/css/layui.css" />
		<link rel="stylesheet" href="../assets/css/anyushi.css" />
		<style>
			.ays-grid-cell{
				padding: 5px;
				height: 18px;
			}
			.ays-grid-cell .ays-grid-cell-number{
				float: left;
				width: 90px;
				height: 24px; 
			}
			.ays-grid-cell .ays-grid-cell-del{
				float: left;
				font-size: 18px;
				line-height: 24px; 
			}
		</style>
	</head>
	<body>
		<div class="layui-form layui-form-pane" style="margin: 5px;">
			<div class="ays-ctrl-menu-group-title">通用</div>
			<div class="layui-form-item">
				<label class="layui-form-label">唯一标识</label>
				<div class="layui-input-block">
					<input id="id" type="text" name="id" autocomplete="off" placeholder="请输入唯一标识" class="layui-input">
				</div>
			</div>
			<div class="ays-ctrl-menu-group-title">栅格</div>
			<div id="gridCells" class="layui-form-item">
				
				<div id="btnAddGridCell" class="layui-btn layui-btn-sm layui-btn-normal">添加</div>
				<div id="btnAverageGridCell" class="layui-btn layui-btn-sm layui-btn-normal">均分</div>
			</div>

		</div>
		<script type="text/javascript" src="../assets/libs/jquery.min.js"></script>
		<script type="text/javascript" language="javascript">
			var createGridCellOption = function(target) {
				var number = target.attr('class').replace('layui-col-md', '').replace(' ays-ctrl-container', '');
				var gridCell = $('<div class="ays-grid-cell">' +
					'<div class="clear"></div>' +
					'</div>');
				var gridCellNumber = $('<input type="number" class="layui-input ays-grid-cell-number" />')
					.attr({
						id: 'num_' + number,
						value: number
					});
				gridCellNumber.bind('input propertychange', function() {
					var val = $(this).val();
					if (val < 1) {
						$(this).val(1);
						return;
					} else if (val > 12) {
						$(this).val(12);
						return;
					}
					target.removeClass();
					target.addClass('layui-col-md' + val);
					target.addClass('ays-ctrl-container');
				})
				var gridCellDel = $('<i class="layui-icon layui-icon-reduce-circle ays-grid-cell-del"></i>');
				gridCellDel.click(function() {
					var that = $(this);
					target.remove();
					that.parent().remove();
				})
				gridCell.append(gridCellNumber).append(gridCellDel);
				return gridCell;
			}
			
			function isPositiveNum(s){//是否为正整数  
			    var re = /^[0-9]*[1-9][0-9]*$/ ;  
			    return re.test(s)  
			} 
			
			var setControl = function(ctrl) {
				var gridCellContainer = ctrl.children('.ays-ctrl-container');
				var gridCells = $("#gridCells");
				$('.ays-grid-cell-number').unbind("input propertychange");
				$('.ays-grid-cell').remove();
				for (i = 0; i < gridCellContainer.length; i++) {
					var target = gridCellContainer[i]
					gridCells.append(createGridCellOption($(target)));
				}
				//添加栅格
				$('#btnAddGridCell').unbind("click");
				$('#btnAddGridCell').click(function(){					
					var cell = $('<div class="layui-col-md6 ays-ctrl-container"></div>');
					gridCells.append(createGridCellOption($(cell)));
					ctrl.append(cell);
					parent.provider.loadSortable(cell.get(0));
				})
				//均分计算
				$('#btnAverageGridCell').unbind("click");
				$('#btnAverageGridCell').click(function(){					
					var gridCellNumbers = gridCells.find('.ays-grid-cell-number');
					var number = 6;
					if(gridCellNumbers.length < 2){
						return;
					}
					if(gridCellNumbers.length >= 12){
						return;
					}
					number = 12 / gridCellNumbers.length;
					if(!isPositiveNum(number)){						
						return;
					}
					gridCellNumbers.val(number);
					gridCellContainer = ctrl.children('.ays-ctrl-container');
					for (i = 0; i < gridCellNumbers.length; i++) {
						var target = $(gridCellContainer[i]);
						target.removeClass();
						target.addClass('layui-col-md' + number);
						target.addClass('ays-ctrl-container');
					}
				})
			}
		</script>
	</body>
</html>
